<template>
  <div class="login">
    <div class="left">
      <div class="top">
        <img class="logo-img" src="@/assets/logo-zp.png" alt />
        <span class="t1">黑马面面</span>
        <div class="line"></div>
        <span class="t2">用户登录</span>
      </div>
      <!-- 表单 -->
      <el-form :model="form" class="form" :rules="rules" ref="ruleForm">
        <el-form-item prop="phone">
          <el-input prefix-icon="el-icon-user" v-model="form.phone"  placeholder="请输入手机号" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input show-password v-model="form.password"  prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-row>
            <el-col :span="16">
              <el-input  v-model="form.code"  prefix-icon="el-icon-key" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <img class="code" :src="codeImg" @click="refreshCode" alt />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item  prop="type">
          <el-checkbox v-model="form.type">
            我以阅读并同意
            <el-link type="primary">用户协议</el-link>
            <el-link type="primary">隐私条款</el-link>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="but" type="primary" @click="toLogin">同意</el-button>
          <br>
          <el-button class="but" type="primary" @click='cancelEvent'>注册</el-button>
        </el-form-item>
      </el-form>
    </div>
     

    <img src="@/assets/login-zp.png" alt class="right" />
    <!-- 注册模态框 -->
      <register ref="register"> </register>
   
  </div>

</template>

<script>
//导入注册弹框组件
import register from './register'
//导入登录登录axios api 和拦截器
import {login}from '@/api/login.js'
//注册弹框组件

export default {
  //注册弹框事件
  components:{
  register
 },
  data() {
    return {
      codeImg:process.env.VUE_APP_URL+"/captcha?type=login",
      form: {

        //用户名
        phone:"",
        //密码
        password:"",

        //y验证码
        code:"",
        //协议
        type:"",

      },
      rules:{
        phone:[
          { required: true, message: '手机号', trigger: 'blur' },
           { validator:(rule,value,callback)=>{
                
               let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
               if(reg.test(value)){
                 callback()
               }else{
                 callback(new Error("请正确手机地址"))
               }
            },trigger:'change'
            }
        ],
        password:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
       Verification:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [
            {  required: true, message: '请仔细阅读选择协议并勾选', trigger: 'blur' },
            { validator:(rule,value,callback)=>{
                 
                if(value){
                 callback()
               }else{
                 callback(new Error("请仔细阅读选择协议并勾选"))
               }
            },trigger:'change'
            }
          ],
         
      }
      
      
    }
    
  },
  methods:{
    //.刷新验证码
    refreshCode(){
           this.codeImg=process.env.VUE_APP_URL+"/captcha?type=login&212312=  "+Date.now()
    },
    //祖册模态框弹出方法
    cancelEvent(){
       console.log(1);
      //访问注册组件this 通过this访问isShow = true
      //父传子 1:在子组件标签上定义一个ref ref=值  2：this.$refs.ref.isShow=true
      this.$refs.register.isShow = true

    },
    toLogin(){ 
       this.$refs.ruleForm.validate((result)=>{
         if(result){
                if(result){
                  alert('验证通过') 
                  login(this.form).then(res=>{
                    window.console.log(res)
                  })
                }else{
                  alert('验证失败')
                }
         }
       })

    }
  }
};
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);
  display: flex;
  align-items: center;
  justify-content: space-around;

  .left {
    padding: 42px;
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    .top {
      display: flex;
      align-items: center;
      .t1 {
        font-size: 24px;
        font-family: SourceHanSansCN Regular, SourceHanSansCN Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #0c0c0c;
        margin: 0 15px;
      }
      .t2 {
        font-size: 22px;
        font-family: PingFangSC Regular, PingFangSC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #0c0c0c;
        margin-left: 15px;
      }
      .line {
        width: 1px;
        height: 28px;
        background: #c7c7c7;
      }
      .logo-img {
        width: 22px;
        height: 17px;
      }
    }
    .code {
      width: 100%;
      height: 40px;
    }
    .form{
      margin-top: 30px;
    }
    .but{
      display: block;
      width: 100%;
    }
  }
}
</style>